<!--
 * @Author: cheung0
 * @Date: 2021-11-19 19:29:15
-->
<template>
  <header>
    <div class="l-content">
      <el-button
          v-if="this.$store.state.tab.isCollapse"
          icon="el-icon-arrow-right"
          size="mini"
          @click="handleMenu"
          circle
      ></el-button>
      <el-button
          v-else
          icon="el-icon-arrow-left"
          size="mini"
          @click="handleMenu"
          circle
      ></el-button>
      <h3 style="color: #fff">首页</h3>
    </div>
    <div class="r-content">
      <el-dropdown trigger="click" size="mini">
        <span class="el-dropdown-link">
          <img :src="userImg" class="user"/>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="gotoHome">个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      userImg: require("../assets/avatar.jpg"),
    };
  },
  methods: {
    gotoHome() {
      this.$router.push("/back/home");
    },
    async logout() {
      await request.post("/api/logout");
      this.$notify.success({
        title: "成功！",
        message: "登出成功！",
        duration: 1500
      })
      await this.$router.push("/login");
    },
    handleMenu() {
      this.$store.commit("collapseMenu");
    },
  },
};
</script>

<style lang="scss">
header {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.l-content {
  display: flex;
  align-items: center;

  .el-button {
    margin-right: 20px;
  }
}

.r-content {
  position: absolute;
  right: 0.3vw;
  top: 10px;

  .user {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>
